<template>
  <div class='container'>目录管理
    <el-card>
      <!-- 筛选表单区域 -->
      <div class="flex-box">
        <div>
          <el-form label-width="80px"
                   inline
                   size="small">
            <el-form-item label="标签名称">
              <el-input v-model="query.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="query.state"
                         placeholder="请选择">
                <el-option :value='1'
                           label="启用">
                </el-option>
                <el-option :value='0'
                           label="禁用">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="onCancel">取消</el-button>

            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="onSumit">搜索</el-button>
            </el-form-item>

          </el-form>
        </div>
        <div>
          <el-button type="text"
                     @click="$router.push('/subjects/list')"
                     label="right"><i class="el-icon-wind-power"></i>&nbsp;返回学科</el-button>
          <el-button type="success"
                     label="right"
                     size="small"
                     @click="handleCreate"><i class="el-icon-edit"></i>新增目录</el-button>
        </div>

      </div>
      <el-alert :title="`总共${total}条数据`"
                type="info"
                effect="light"
                show-icon
                closable></el-alert>

      <!-- 表单区域 -->
      <!-- :data="list" -->
      <el-table :data="directoryList"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="序号">
        </el-table-column>
        <el-table-column prop="subjectName"
                         label="所属学科">
        </el-table-column>
        <el-table-column prop="tagName"
                         label="标签名称">
        </el-table-column>
        <el-table-column prop="username"
                         label="创建者">
        </el-table-column>
        <el-table-column prop="addDate"
                         label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>

        <el-table-column prop="state"
                         label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">启用</span>

            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button type="text"
                       v-if="scope.row.state===1"
                       @click="newState(scope.row,0)">启用</el-button>
            <el-button type="text"
                       v-if="scope.row.state===0"
                       @click="newState(scope.row,1)">禁用</el-button>
            <el-button type="text"
                       :disabled="scope.row.state===1"
                       @click="editCreate(scope.row)">修改</el-button>
            <el-button type="text"
                       :disabled="scope.row.state===1"
                       @click="deleteById(scope.row.id)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <page-tool @pageChange="pageChange"
                 :total="total"
                 @pageSizeChange="pageSizeChange" />

      <!-- 新增弹框-->

      <tags-add :directoryList="directoryList"
                :parentList="parentList"
                v-bind:is="TagsAdd"
                @close="handClose"
                @newDataes="newAddList"
                @getTagsList="getTagsList"
                @handClose="handClose"
                @subClose="handClose"
                ref="editMenu"></tags-add>

      <!-- 修改弹框 -->
      <!-- 重新提交 -->

      <!-- 预览弹框 -->
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags'
import TagsAdd from '@/module-hmmm/components/tags-add'
import PageTool from '@/module-dashboard/components/pageTool'
export default {
  components: { TagsAdd, PageTool },
  data () {
    return {
      TagsAdd: 'TagsAdd',
      query: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      },
      directoryList: [],
      total: 0,
      parentList: []
    }
  },
  methods: {
    //   获取目录的列表数据
    getTagsList () {
      list({
        page: this.query.page,
        pagesize: this.query.pagesize,
        tagName: this.query.tagName
      }).then(data => {
        console.log(data.data)
        this.total = data.data.counts
        this.directoryList = data.data.items
      })
    }, // 点击取消按钮 清空输入框内的内容
    editCreate (row) {
      // 打开弹窗
      this.$refs.editMenu.dialogFormV()
      this.$refs.editMenu.isEdit = true

      this.$refs.editMenu.hanldeEditForm(row.id)
    } // 修改数据 更新列表
  },
  onCancel () {
    this.query.tagName = ''
    this.query.state = null
    this.getTagsList()
  }, // 点击搜索来搜索
  onSumit () {
    console.log(121)
    this.query.page = 1
    this.getTagsList()
  },
  // 子组件的自定义 事件打开弹窗事件
  handleCreate () {
    this.$refs.editMenu.dialogFormV()
    this.$refs.editMenu.isEdit = false
    // 当点击取消是 如果输入框内有值 就重置表单
    this.$refs.editMenu.handleResetForm()
  }, // 子组件的自定义是事件 关闭弹窗事件
  handClose () {
    this.$refs.editMenu.dialogFormH()
  }, // 子组件的提交追加数据事件
  newAddList (parameters) {
    console.log(parameters)
    this.directoryList.unshift(parameters)
    this.getTagsList()
  }, // 改变启用禁用的状态
  async newState (row, num) {
    console.log(row.id, num)

    await changeState({
      id: row.id,
      state: num
    }).then(() => {
      this.getTagsList()
    })
  }, // 改变页码值的变化
  pageChange (page) {
    this.query.page = page

    this.getTagsList()
  }, // 监听每页数变化
  pageSizeChange (pagesize) {
    this.query.pagesize = pagesize
    //   console.log(this.query.pagesize)

    this.getTagsList()
  }, // 点击删除事件
  deleteById (id) {
    this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
      type: 'warning'
    })
      .then(() => {
        remove({ id })
          .then(response => {
            this.$message.success('成功删除了用户' + '!')
            this.directoryList.splice(id, 1)
            this.getTagsList()
          })
          .catch(response => {
            this.$message.error('删除失败!')
          })
      })
      .catch(() => {
        this.$message.info('已取消操作!')
      })
  }, // 编辑修改 表单详情数据加载

  created () {
    this.getTagsList()
  }
}
</script>

<style  >
.container {
  padding: 10px;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
